<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./9466云专题 iconfont/font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #2980b9;
            color: white;
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }
        .container {
            display: flex;
        }
        .container ul {
            height: 800px;
            width: 100px;
            background-color: #2980b9;
            line-height: 40px;
            list-style: none;
            color: white;
        }
        .container ul li{
            width:  100%;
            text-align: center;
        }
        .container ul .active{
            background-color: #34a7f4;
        }
        .container main{
            flex: 1;
            padding: 20px;
        }
        .container main .inputbox{
            margin: 20px 0;
        }
        .container main .inputbox input{
            height: 40px;
            border-radius: 20px;
            width: 300px;
            padding-left: 20px;
            outline: none;
            border: 1px solid gray;
        }
        .container main .inputbox button{
            margin-left: 10px;
            height: 40px;
            border-radius: 10px;
            background-color: #5db85b;
            padding:5px 20px;
            border: 1px solid gray;
        }
        .container main button{
            margin-left: 10px;
            height: 40px;
            border-radius: 10px;
            background-color: #5db85b;
            padding:5px 20px;
            border: 1px solid gray;
        }
        .container main table{
            margin: 20px 0;
            width: 100%;
            line-height: 40px;
            text-align: center;
            border-collapse: collapse;
        }
        .container main table tr th:first-child, .container main table tr td:first-child{
            text-align: left;
        }
        .container main table tbody tr td {
            border-bottom: 2px solid gainsboro; 
        }
        .container main table tbody tr td div{            
            height: 30px;
            line-height: 30px;
            color: white;
        }
        .container main table tbody tr td div .zhengchang{
            background-color: #5db85b;
            padding: 5px 10px;
            border-radius: 10px;
        }
        .container main table tbody tr td div .yichang{
            background-color:red;
            padding: 5px 10px;
            border-radius: 10px;
        }
        .container main table tbody tr td span{
            padding: 3px;
        }
        .container main footer {
               text-align: center;
        }
        .container main footer span{
            border:1px solid gray;
            padding: 3px;
            border-radius: 5px;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <header>
        <span class="logo">9466云专题</span>
        <span class="iconfont icon-yonghu">龙猫(9466云专题)</span>
    </header>
    <section class="container">
        <ul>
            <li class="iconfont icon-home active">首页</li>
            <li class="iconfont icon-zhuantiguanli">专题</li>
            <li class="iconfont icon-yonhu">用户</li>
            <li class="iconfont icon-shezhi
            ">设置</li>
            <li class="iconfont icon-xitongrizhi
            ">日志</li>
        </ul>
        <main>
            <div class="inputbox">
                <input type="text" placeholder="搜索用户">
                <button>搜索</button>
            </div>
            <button class="iconfont icon-tianjia">添加用户</button>
            <table>
                <thead>
                    <tr>
                        <th>邮箱(用户)</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>所属组</th>
                        <th>管理员</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <footer>
                <span class="shangyiye">上一页</span>
                <span class="xiayiye">下一页</span>
            </footer>
        </main>
    </section>
</body>
</html>

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="js/mockdata.js"></script>
<script>
    render(data.list)
function render(data){
    var str=data.map((item,index)=>{
        return`  <tr>
                        <td>${item.email}</td>
                        <td>${item.name}</td>
                        <td>${item.phone}</td>
                        <td>${item.ingroup}</td>
                    .    <td>${item.isadmin?'是':'否'}</td>
                        <td ><div>${item.status? "<span class='zhengchang'> 正常 </span>":"<span class='yichang'>异常</span>" }</div></td>
                        <td>
                            <span class="iconfont icon-bianji"></span>
                            <span class="iconfont icon-shanchu
                            "></span>
                        </td>
                    </tr>`
    }).join('')
    document.querySelector('tbody').innerHTML=str
}
var arr= document.querySelectorAll('.container ul li')
//点击事件
for(let i=0;i<arr.length;i++){
    arr[i].onclick=function(){
         for(let j=0;j<arr.length;j++){
            arr[j].classList.remove('active')
         }
         arr[i].classList.add('active')
}
}

    var page = 1;
    function objToSearchString(obj){
            var str = '';
            //遍历对象, 将对象obj的每个属性名和属性值拼接为 key=value& 的格式
            for( var key in obj ){
                str += `${key}=${obj[key]}&`
            }
            //返回拼接好的字符串  key=value&key=value&key=value&key=value
            return str.slice(0,str.length-1);
        }

        function ajax( method, url , params , cb ){
            //1.创建请求对象
            var xhr = new XMLHttpRequest();

            //2.配置请求对象
            xhr.open(method, url+"?"+ objToSearchString(params) );

            //3.设置回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    cb( JSON.parse( xhr.responseText )  );
                }
            }

            //4.发送请求
            xhr.send();
        }
        
        console.log(paga);
        document.querySelector('.shangyiye').onclick = function(){
            if( page > 1 ){
                ajax('get',`./mockdata.js`, {page:--page,count:2} , function(data){
                    var str = data.emotions.map((item,index)=>{
                        return `<div> <img src="${item.url}" /> <div> ${item.title} </div> </div>`
                    }).join('')
                    //渲染表情
                    document.querySelector('.list').innerHTML = str;
                });
            }
        }
    </script>